<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <style type="text/css">
            .d1{
                width: 20%;
                height: 200px;
                background-color: antiquewhite;
            }
            /* 媒体查询 */
            /* 移动端 */
            @media only screen and (max-width: 600px){
               .d1{
                 width:100%;
                height:200px;
                background-color: rgb(73, 226, 73);
               }
            }
            /* 平板 */
            @media only screen and (min-width:600px) and (max-width:1200px){
                .d1{
                    width: 50%;
                    height: 300px;
                    background-color: skyblue;
                }
            }
            @media only screen and (min-width: 1200px){
                .d1{
                    width: 1000px;
                    height: 1000px;
                    background-color: beige;
                }
            }
        </style>    
    </head>
    <body>
            <div class="d1">helloworld</div>
    </body>
</html>